import React, {PureComponent} from 'react';
import fetchHandler from '../../../fetch/fetchHandler';
import PropTypes from 'prop-types';
import { getUserList, cancelReqs } from '../../../fetch/fetchApi'; //示例api

class AsyncContent extends PureComponent {
  constructor () {
    super();
    this.state = {
      table: 'loading...'
    }
  }

  static contextTypes = {
    store: PropTypes.object.isRequired
  }

  componentWillUnmount () {
    // 组件卸载前，取消当前数据请求
    cancelReqs.pop()('数据请求已取消');
  }

  componentDidMount () {
    this.fetchPromise = fetchHandler(getUserList, {id: this.context.store.getState().modalInfo.param.id}).then((res) => {
      res && res.code === 'success' && this.setState({
        table: res.data
      });
    });
  }

  render () {
    return <div style={{padding: '20px'}} className={'sc-modal-page'}><p>{JSON.stringify(this.state.table)}</p></div>
  }
}

export default AsyncContent;